<template>
  <div style="padding:15px;">
    <el-button type="primary" style="margin:15px 0" @click="append(id,2)">
      add
    </el-button>
    <el-table
      v-if="isRouterAlive"
      ref="dragTable"
      :data="array"
      style="width: 100%"
      border
      row-key="id"
    >
      <el-table-column
        label="技术名称"
        width="400"
        class-name="second"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.isDel==1">{{ scope.row.name }}</span>
          <span v-else style="color:#ff0000">{{ scope.row.name }}(已删除)</span>
          <el-button-group class="btngroup" style="float:right;margin-right:10px;">
            <el-button
              v-if="scope.row.isDel==1"
              size="mini"
              type="warning"
              class="el-icon-folder-add"
              @click="append(scope.row.id,scope.row.rank)"
            />
            <el-button
              v-if="scope.row.isDel==1"
              size="mini"
              type="primary"
              class="el-icon-edit"
              @click="edit(scope.row.id)"
            />
            <el-button
              v-if="scope.row.isDel==1"
              size="mini"
              type="danger"
              class="el-icon-delete"
              @click="handleModifyStatus(scope.row.id,0)"
            />
            <el-button
              v-else
              size="mini"
              type="info"
              class="el-icon-platform-eleme"
              @click="handleModifyStatus(scope.row.id,1)"
            />
          </el-button-group>
        </template>
      </el-table-column>
      <el-table-column
        label="下级技术"
      >
        <template slot-scope="scope">
          <ThirdTable :parentid="scope.row.id" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-if="dialogFormVisible" :append-to-body="true" :modal="true" :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible">
      <Edit :edit-id="editId" :rank="rank" :dialog-form-visible.sync="dialogFormVisible" :parentid="parentId" @getlist="getData" />
    </el-dialog>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import Edit from '@/views/ability/skill/edit'
import ThirdTable from '@/views/ability/skill/third'
export default {
  name: 'SkillDetails',
  components: { Edit, ThirdTable },
  data() {
    return {
      array: null,
      title: '',
      visible: false,
      drawer: false,
      editId: undefined,
      parentId: 0,
      rank: 0,
      dialogFormVisible: false,
      id: 0,
      isRouterAlive: false,
      oldList: [],
      newList: []
    }
  },
  created() {
    this.id = parseInt(this.$route.query.detailid)
    this.getData()
  },
  methods: {
    append(parentId, rank) {
      this.title = '添加下级技术'
      this.parentId = parentId
      this.rank = rank
      this.editId = undefined
      this.dialogFormVisible = true
    },
    edit(editId) {
      this.title = '修改技术点'
      this.editId = editId
      this.dialogFormVisible = true
    },
    handleModifyStatus(id, isDel) {
      const txt = isDel === 0 ? '确定要删除该数据吗?' : '确定要恢复该数据吗?'
      this.del('/skill/del', result => {
        this.getData()
      }, { id: id, isDel: isDel }, txt)
    },
    getData() {
      this.isRouterAlive = false
      this.get('/skill/listByParent', result => {
        this.array = result.data.records
        this.isRouterAlive = true
        if (this.array != null) {
          this.oldList = this.array.map(v => v.id)
          this.newList = this.oldList.slice()
          this.$nextTick(() => {
            this.setSort()
          })
        }
      }, { id: this.id })
    },
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.array.splice(evt.oldIndex, 1)[0]
          this.array.splice(evt.newIndex, 0, targetRow)
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
          this.axios.get('/skill/sort', { params: { ids: this.newList.toString() }})
        }
      })
    }
  }
}
</script>
<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped lang="scss">
  .btngroup{
    display: none;
  }
  .second:hover .btngroup{
    display: block;
    transition: 10s;
  }
  .menu li{
    margin:0;
    padding:0;
    border-bottom:1px solid #ccc;
    height:30px;
    line-height:30px;
  }
   .menu li:hover{
     background:#000000;
     color:#fff;
   }
   .icon-star{
     margin-right:2px;
   }
   .drag-handler{
     width: 20px;
     height: 20px;
     cursor: pointer;
   }
   .show-d{
     margin-top: 15px;
   }
</style>
